<template>
  <div class="app-container">
    <el-card>
      <div slot="header">
        <span>i18n 测试页面</span>
      </div>
      
      <el-row :gutter="20">
        <el-col :span="12">
          <h3>当前语言: {{ $i18n.locale }}</h3>
          <h3>Store语言: {{ $store.getters.language }}</h3>
          <h3>Cookie语言: {{ cookieLanguage }}</h3>
        </el-col>
        
        <el-col :span="12">
          <h3>测试翻译:</h3>
          <p>总用户数: {{ $t('dashboard.totalUsers') }}</p>
          <p>快捷操作: {{ $t('dashboard.quickActions') }}</p>
          <p>系统信息: {{ $t('dashboard.systemInfo') }}</p>
        </el-col>
      </el-row>
      
      <el-divider />
      
      <el-row>
        <el-col :span="24">
          <h3>语言切换测试:</h3>
          <el-button @click="testLanguageSwitch('zh')" type="primary">切换到中文</el-button>
          <el-button @click="testLanguageSwitch('en')" type="success">Switch to English</el-button>
        </el-col>
      </el-row>
      
      <el-divider />
      
      <el-row>
        <el-col :span="24">
          <h3>调试信息:</h3>
          <pre>{{ debugInfo }}</pre>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import Cookies from 'js-cookie'

export default {
  name: 'TestI18n',
  data() {
    return {
      cookieLanguage: Cookies.get('language') || '未设置'
    }
  },
  computed: {
    debugInfo() {
      return {
        i18nLocale: this.$i18n.locale,
        storeLanguage: this.$store.getters.language,
        cookieLanguage: this.cookieLanguage,
        availableLocales: this.$i18n.availableLocales,
        messages: Object.keys(this.$i18n.messages),
        dashboardKeys: Object.keys(this.$i18n.messages[this.$i18n.locale]?.dashboard || {})
      }
    }
  },
  methods: {
    testLanguageSwitch(lang) {
      console.log('Testing language switch to:', lang)
      
      // 更新i18n
      this.$i18n.locale = lang
      console.log('i18n locale updated to:', this.$i18n.locale)
      
      // 更新store
      this.$store.dispatch('app/setLanguage', lang)
      console.log('store language updated to:', this.$store.getters.language)
      
      // 更新cookie
      Cookies.set('language', lang)
      this.cookieLanguage = lang
      console.log('cookie language updated to:', this.cookieLanguage)
      
      // 强制更新组件
      this.$forceUpdate()
      
      this.$message.success(`语言已切换到: ${lang}`)
    }
  }
}
</script>

<style scoped>
pre {
  background-color: #f5f5f5;
  padding: 10px;
  border-radius: 4px;
  font-size: 12px;
}
</style> 